<!-- Used in createHITTemplate page -->
{%if SuccessMsg%}
<div class=success>{{SuccessMsg}}</div>
{%endif%}
{%if ErrorMsg%}
<div class=warn>{{ErrorMsg}}</div>
{%endif%}
<div class="HITTemplateName">
    <label class="caption"><strong>Template Name:</strong></label>
    <select name="hit_template[name]" id="ddl_hit_template">
        {% for ht in HITPropertiesTemplates %}
        <option value="{{ht.key}}" {% ifequal ht.TemplateName hitPropertiesTemplate.TemplateName %} selected = selected {% endifequal %}>{{ht.TemplateName}}</option>
        {% endfor %}
    </select>
    <div class="help_small">Tip: To create a new Template for future use, edit the property fields below and press "Save as New Template".</div>
</div>
<div id="hit_properties">
	<h1>Review your HIT Properties</h1>  
    <div class="form HITDescription">
        <h2>A. This section describes the HIT you are submitting</h2>
        <div class="row">
            <label class="caption">Title</label>
            <div class="field">
                <input type="text" value="{{hitPropertiesTemplate.Title}}" size="70" name="hit_template[title]" maxlength="128" id="hit_template_title">
                <div class="help_small">This is what the worker will see as the HIT title.</div>
            </div>
        </div>
        <div class="row">
            <label class="caption">Description</label>
            <div class="field">
                <input type="text" value="{{hitPropertiesTemplate.Description}}" size="120" name="hit_template[description]" maxlength="255" id="hit_template_description">
                <div class="help_small">This provides more detail about the task. It gives workers information before they
                    decide to view your HIT.</div>
            </div>
        </div>
        <div class="row">
            <label class="caption">Keywords</label>
            <div class="field">
                <input type="text" value="{{hitPropertiesTemplate.Keywords}}" size="75" name="hit_template[keywords]" maxlength="255" id="hit_template_keywords">
                <div class="help_small">These keywords make your HIT more searchable for workers.</div>
            </div>
        </div>
    </div>
    <div class="form workingOnHIT">
        <h2>B. This section sets the HIT working conditions</h2>
        <div class="row">
            <label class="caption">
                Time allotted per assignment
            </label>
            <div class="field">
                <input value="{{hitPropertiesTemplate.AssignmentDuration}}" size="5" name="hit_template[assignment_duration_fields][value]" type="text" id="hit_template_duration_value">
                <select name="hit_template[assignment_duration_fields][units]" id="hit_template_duration_unit">
                    <option value="Days" {% ifequal 'Days' hitPropertiesTemplate.AssignmentDurationUnit %} selected = selected {% endifequal %}>Days</option>
                    <option value="Hours" {% ifequal 'Hours' hitPropertiesTemplate.AssignmentDurationUnit %} selected = selected {% endifequal %}>Hours</option>
                    <option value="Minutes" {% ifequal 'Minutes' hitPropertiesTemplate.AssignmentDurationUnit %} selected = selected {% endifequal %}>Minutes</option>
                </select>
                <div class="help_small">This value sets the default maximum time a worker has to work on a task. You can modify it for a specific HIT in the Question data.</div>
            </div>
        </div>
        <div class="row">
            <label class="caption">
                HIT expires in
            </label>
            <div class="field">
                <input value="{{hitPropertiesTemplate.Lifetime}}" size="5" name="hit_template[lifetime_fields][value]" type="text" id="hit_template_life_time_value">
                <select name="hit_template[lifetime_fields][units]" id="hit_template_life_time_unit">
                    <option value="Days" {% ifequal 'Days' hitPropertiesTemplate.LifetimeUnit %} selected = selected {% endifequal %}>Days</option>
                    <option value="Hours" {% ifequal 'Hours' hitPropertiesTemplate.LifetimeUnit %} selected = selected {% endifequal %}>Hours</option>
                    <option value="Minutes" {% ifequal 'Minutes' hitPropertiesTemplate.LifetimeUnit %} selected = selected {% endifequal %}>Minutes</option>
                </select>
                <div class="help_small">Maximum time the HIT will be available to workers.</div>
            </div>
        </div>
<div class="form payingworkers">
    <h2>C. This section sets the Paying Workers</h2>
    <div class="row">
        <label class="caption">Number of assignments per HIT</label>
        <div class="field">
            <input class="numeric_with_unit" id="hit_template_max_assignments" name="hit_template[max_assignments]" size="10" value="{{hitPropertiesTemplate.MaxAssignments}}" type="text">
            <p>How many unique workers do you want to work on each HIT?</p>
        </div>
    </div>
    <div class="row">
        <label class="caption">Results are automatically approved in</label>
        <div class="field">
            <input value="{{hitPropertiesTemplate.AutoApprovalDelay}}" size="5" name="hit_template[auto_approval_delay_fields][value]" type="text" id="hit_template_auto_approval_delay_value">
            <select name="hit_template[auto_approval_delay_fields][units]" id="hit_template_auto_approval_delay_unit">
                <option selected="selected" value="Days" {% ifequal 'Days' hitPropertiesTemplate.LifetimeUnit %} selected = selected {% endifequal %}>Days</option>
                <option value="Hours" {% ifequal 'Hours' hitPropertiesTemplate.LifetimeUnit %} selected = selected {% endifequal %}>Hours</option>
                <option value="Minutes" {% ifequal 'Minutes' hitPropertiesTemplate.LifetimeUnit %} selected = selected {% endifequal %}>Minutes</option>
            </select>
            <p>After this time, all unreviewed work is approved and workers are paid.</p>
        </div>
    </div>
</div>
        <div class="workerQualification">
            {% include "templates/worker_qualifications.html" %}
            <div class="row add_qualification_requirement">
                <a><img alt="Add more criteria" src="/img/buttons/add.gif"></a>
                <div>Add up to 5 more more criteria</div>
                <div class="help_small">Note: All criteria must be met for a
                    worker to work on these HITs.</div>
            </div>
        </div>
<!--        
		<div class="row">
            <input type="checkbox" {% if hitPropertiesTemplate.RequiredForPreview %} checked = "checked" 
				{% endif %} onclick="previewCheckbox(this)" id="qual_required_preview_overall">
				<label>Required for preview</label> 
            <div style="display: none;" id="private_qual_help">
                <p>If checked, the question data for the HIT will not be
                    shown when a Worker, whose Qualifications do not meet the requirements,
                    tries to preview the HIT.
                </p>
            </div>
            <div class="help_small">
                Tip: you can limit your HITs to workers with a certain
                approval rate. An approval rating of 95% or better
                is considered good.</span>
            </div>
        </div>
-->
    </div>
</div>
<div class="save-template">
    <input type='button' value='Save As New Template' id='saveTemplateBtn' />
    <input type='text' id='newtemplateName' />
</div>

<script type='text/javascript'>
    $(document).ready(function(){
	
        var tab2input = $("#tab-2").find("input[name^='hit_template']");
        var tab2select=$("#tab-2").find("select[name^='hit_template']");
        var newtemplateInput=$("#newtemplateName");
        $("#saveTemplateBtn").click(function(){
            var isValid=true;
            tab2input.each(function(){
                if($.trim($(this).val())=="")
                {
                    $(this).addClass('invalid');
                    isValid=false;
                }
                else
                {
                    $(this).removeClass('invalid');
                }
            })
			
            if($.trim(newtemplateInput.val())=="")
            {
                newtemplateInput.addClass('invalid')
            }
            else
            {
                newtemplateInput.removeClass('invalid')
            }
            if(isValid){
                var dataStrArray=[];
                dataStrArray.push("var postdata = {");
                tab2input.each(function(){
                    if($.trim($(this).attr('id'))!=""){
                        dataStrArray.push('"'+$(this).attr('name')+'":$("#'+$(this).attr('id')+'").val(),');
                    }
                })
                tab2select.each(function(){
                    if($.trim($(this).attr('id'))!=""){
                        dataStrArray.push('"'+$(this).attr('name')+'":$("#'+$(this).attr('id')+'").val(),');
                    }
                })
                dataStrArray.push('"hit_template[name]":$("#newtemplateName").val()}');
                eval(dataStrArray.join(""))
                $.post("/create/hittemplate", postdata, function(data){
                    if(data=="100"){
                        if(confirm("You are not logged in; would you like to login now?")){
                            window.location.href='/login?re=/create/hit';
                        }
                    }
                    else if(data=="403"){
                        alert("You do not have permission to add a new template")
                    }
                    else{
                        alert(data);
                    }
                })
            }
			
        })
		
        $("#ddl_hit_template").change(function(){
            $.get("/get/hpt", {"hpid":$(this).val()}, function(html){
                $("#tab-2").html(html);
            })
        })
	
    })
</script>